<template>
    <!-- 左侧 -->
    <div class="member-detail-left flex-items-box pr-20 flex-col justify-center">
        <div class="member-detail-img-box">
            <el-image :src="goodDetail.goodsImageList[0].url" shape="square" fit="cover" />
        </div>
    </div>
    <!-- 右侧 -->
    <div class="member-detail-right pt-10 box-border flex-col flex-between-box flex-1 h-full pr-10 text-16">
        <div class="flex-between-items-box line-bottom py-2">
            <div class="flex-items-box">
                <el-tag class="mr-8" :type="goodsStatusData.type">{{ goodsStatusData.name }}</el-tag>
                <template v-if="goodDetail.goodsName.length >= 20">
                    <el-tooltip
                        class="box-item"
                        effect="dark"
                        :content="goodDetail.goodsName"
                        placement="bottom"
                    >
                        <div>{{ cropText(goodDetail.goodsName, 20) }}</div>
                    </el-tooltip>
                </template>
                <template v-else>
                    <div>{{ goodDetail.goodsName }}</div>
                </template>
            </div>
            <div>
                <el-popconfirm @confirm="confirmDelete" title="该商品数据将被删除，是否确认删除？">
                    <template #reference>
                        <Icon name="Delete" class="mr-8 cursor-pointer" :size="16"/>
                    </template>
                </el-popconfirm>
                <Icon
                    name="View"
                    class="mr-8 cursor-pointer"
                    :size="16"
                    @click="toPage('see')"
                />
                <Icon
                    name="Edit"
                    class="mr-8 cursor-pointer"
                    :size="16"
                    @click="toPage('edit')"
                />
            </div>
        </div>
        <div class="flex-between-items-box text-14">
            <div class="w-1/2">
                <div>商品编码：{{ goodDetail.goodsCode }}</div>
                <div class="mt-12">商品分类：{{ goodDetail.goodsClassName }}</div>
                <div class="mt-12">创建时间：{{ goodDetail.createdTime }}</div>
            </div>
            <div class="salesStock text-14 rounded-8 box-border p-10 flex-col-between-box">
                <div class="flex-items-box text-16 price-color"><i class="iconfont icon-jine"/>{{ Number(goodDetail.goodsPrice).toFixed(2) }}</div>
                <div class="flex-items-box text-success"><i class="iconfont icon-xiaoliang"/>销量：{{ goodDetail.goodsSales }}</div>
                <div class="flex-items-box"><i class="iconfont icon-kucun"/>库存：{{ goodDetail.goodsStock }}</div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { PropType } from 'vue'
import Icon from '@/components/Icon/index.vue'
import { GoodsDetailResultData, httpDeleteGoods } from '@api/module/goodsCenter'
import { cropText, ElMessages } from '@utils/methods'
import { PageTypeKey } from '@/type/common'
import { useRouter } from 'vue-router'

const router = useRouter()

// 父组件参数
const props = defineProps({
    goodDetail: {
        type: Object as PropType<GoodsDetailResultData>,
        default: () => ({})
    }
})

const emit = defineEmits(['updateGoodList'])

// 商品状态文本
const goodsStatusData = computed(() => {
    switch (props.goodDetail?.listingType) {
    case 1:
        return { name: '已上架', type: 'success' }
    case 2:
        return { name: '待上架', type: 'primary' }
    default:
        return { name: '已下架', type: 'info' }
    }
})

// 删除商品
const confirmDelete = () => {
    httpDeleteGoods({
        goodsId: props.goodDetail?.goodsId
    }).then(({ success }) => {
        if (success) {
            ElMessages.success('该商品相关信息已清空！')
            emit('updateGoodList')
        } else {
            ElMessages.error('删除失败，请重试！')
        }
    })
}

// 查看商品详情
const toPage = (type: PageTypeKey) => {
    router.push({
        path: '/GoodsCenter/AddEditDetail',
        query: {
            pageType: type,
            goodsId: props.goodDetail.goodsId
        }
    })
}
</script>

<style lang="less" scoped>
.member-detail-left{
    width: 150px;
    height: 170px;

    .member-detail-img-box{
        width: 120px;
        height: 120px;
        border: 1px solid #D9D9D9;
        @apply rounded-8 overflow-hidden;

        :deep(.el-image img){
            width: 120px;
            height: 120px;
        }
    }
}

.salesStock{
    width: 145px;
    border: 1px solid #D9D9D9;
    height: 92px;

    i {
        @apply mr-6;
    }

    .iconfont {
        font-size: 15px;
    }

    .icon-jine{
        font-size: 16px;
    }
}

.price-color {
    color: #FF5000;
}
</style>
